<template>
    <div>
        <h1>User Profile</h1>
        <input v-model="user.username" placeholder="Enter username" />
        <input v-model="user.email" placeholder="Enter email" />
        <button @click="updateProfile">Update Profile</button>
        <p>Username: {{ user.username }}</p>
        <p>Email: {{ user.email }}</p>
    </div>
</template>

<script setup>
import { useUserStore } from "../store/useUserStore .js"
import { ref } from 'vue';

// 使用 Pinia Store
const userStore = useUserStore();

// 创建响应式引用
const user = ref({
    username: userStore.username,
    email: userStore.email
});

// 更新用户信息的方法
function updateProfile() {
    // 直接更新 store 中的状态
    userStore.setUsername(user.value.username);
    userStore.setEmail(user.value.email);
    console.log(user.value.username); // 打印最新的用户名
    console.log(user.value.email); // 打印最新的邮箱
}
</script>
